<template>
	<up-table
		:options="tableOptions"
		:data="list"
		:loading="loading"
		:isEmpty="!list.length"
		:error="error">
		<template #game="{ data }">
			<div v-if="data.extra.sportIds.length > 1" class="flex items-center">
				<base-icon name="parlay" class="text-[18px]"></base-icon>
				<div class="ml-1 truncate">{{ $t('betting.combo', [data.extra.sportIds.length]) }}</div>
			</div>
			<div v-else class="flex items-center">
				<sports-icon :sportId="data.extra.sportIds[0]" class="!text-[18px]" />
				<div class="ml-1 truncate">{{ tName(data.extra.eventName) }}</div>
			</div>
		</template>
		<template #user="{ data }">
			<account-user
				:userId="data.userId"
				:vip="data.vip"
				:userName="data.userName"
				:nickName="data.nickName"
				:toProfileTab="UpSwitchTabsEnum.sports" />
		</template>
	</up-table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseIcon } from '@/components/base'
import { TableOptions, UpSwitchTabsEnum, UpTable } from '@/components/up'
import { SportsIcon } from '@/components/sports'
import { AccountUser } from '@/components/account'
import { getLiveBigWinSports } from '@/api/race'
import { useRequest } from '@/hooks'
import { tName } from '@/utils'

const tableOptions: TableOptions[] = [
	{
		slot: 'game',
		textT: 'slotsSlip.game',
		width: '25%'
	},
	{
		slot: 'user',
		textT: 'slotsSlip.owner',
		width: '10%'
	},
	{
		prop: 'bet',
		textT: 'slotsSlip.betAmount',
		align: 'right',
		type: 'amount'
	},
	{
		prop: 'multiplier',
		textT: 'slotsSlip.multiplier',
		align: 'right',
		type: 'multiplier'
	},
	{
		prop: 'payout',
		textT: 'slotsSlip.payOut',
		align: 'right',
		type: 'amount',
		class: 'text-success'
	}
]

const list = ref<any[]>([])

const { run, loading, error } = useRequest(getLiveBigWinSports, {
	onSuccess: (data: any) => {
		list.value = data.map((item: any) => item)
	}
	// onFinally: () => {
	// 	bus.$on(SOCKET_LIVE_BIG_WIN_SPORTS, onRankingMsg)
	// 	subChannels([`sports_channel_${appStore.region}`])
	// }
})

// const onRankingMsg = (data: any) => {
// 	list.value.unshift(data)
// 	if (list.value.length > 10) {
// 		list.value.pop()
// 	}
// }

// onBeforeUnmount(() => {
// 	bus.$off(SOCKET_LIVE_BIG_WIN_SPORTS, onRankingMsg)
// 	unSubChannels([`sports_channel_${appStore.region}`])
// })
//
// watch(
// 	() => appStore.region,
// 	(cur, pre) => {
// 		unSubChannels([`sports_channel_${pre}`])
// 		subChannels([`sports_channel_${cur}`])
// 	}
// )

run()
</script>
